<template>
  <el-dialog
    :visible.sync="$store.state.dias.product.show"
    width="500px"
    center
    class="dia-add"
    :title="$store.state.dias.product.title"
    >
    <main v-if="$store.state.dias.product.isversion">
      <div class="box mb20" v-for="(item, index) in modelData0" :key="index">
        <span class="title">{{item.label}}</span>
        <el-input v-model="info[item.prop]" :placeholder="item.placeholder"></el-input>
      </div>

      <div class="box mb20" v-for="(item, index) in modelData1" :key="'price_'+index">
        <span class="title">{{item.label}}</span>
        <el-input v-model="info.children[index][item.prop]" :placeholder="item.placeholder"></el-input>
        <el-input v-model="info.children[index].price" placeholder="请输入价格"  v-if="item.hasPrice" class="ml10"></el-input>
        <span v-if="index>0" class="icon-shanchu iconfont ft12 ml10 color-999 hover" @click="doDel(index)"><span class="color-red"> 删除</span></span>
      </div>
      <span class="iconfont icon-jia ft14 color-blue hover" @click="addLine"><span> 新增颜色</span></span>
    </main>

    <main v-else class="parameter">
      <div class="box mb20" v-for="(item, index) in modelData3" :key="index">
        <span class="title">{{item.label}}</span>
        <el-input v-model="info4[item.prop]" :placeholder="item.placeholder"></el-input>
      </div>
    </main>

    <el-button class="submit-btn" type="success" @click="doSure">确 定</el-button>
  </el-dialog>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      modelData0:[
        {prop:"version",label:"型号",placeholder:"请输入型号"},
      ],
      modelData1:[
        {prop:"color",label:"颜色",placeholder:"请输入颜色名称",hasPrice:true},
      ],

      modelData3:[
        {prop:"name",label:"参数",placeholder:"请输入商品参数"},
        {prop:"detail",label:"参数详情",placeholder:"请输入参数详情"},
      ],
      info:{children:[{}]},

      info4:{}
    };
  },
  methods: {
    /**
     * @name 新增行
     */
    addLine(){
      this.modelData1.push({prop:"color",label:"颜色",placeholder:"请输入颜色名称",hasPrice:true})
      this.info.children.push({
        color:"",
        price:""
      })
    },

    /**
     * @name 删除行
     */
    doDel(index){
      this.modelData1.splice(index,1)
      this.info.children.splice(index,1)
    },

    doSure(){
      if(!this.$store.state.dias.product.isversion){
        this.$emit('editData1',this.info4)
      }else{
        this.$emit('editData0',this.info)
      }
      
      this.$store.state.dias.product.show = false
    },

    init(){
      let goals = this.$store.state.dias.product.content.children
      this.info={children:[{}]}
      if(!this.$store.state.dias.product.isversion){
        this.info4={...this.$store.state.dias.product.content}
        return
      }
      if(goals){
        this.modelData1=this.modelData1.concat(new Array(goals.length-1).fill({prop:"color",label:"颜色",placeholder:"请输入颜色名称",hasPrice:true}))
        this.info={children:[]}
        goals.forEach(ele => {
          this.info.children.push({
            color:ele.color,
            price:ele.price
          })
        });
        this.info.version=this.$store.state.dias.product.content.version
        this.info.index0=this.$store.state.dias.product.content.index0
      }
    }
  },
  created() {
    this.$nextTick(()=>{
      this.init()
    })
  },
  beforeDestroy(){
    this.$store.state.dias.product.content={}
  }
};
</script>
<style lang="scss" scoped>
.dia-add {
  font-size: 14px;
  main{
    padding: 10px 20px 10px;

    div.box{
      display: flex;
      line-height: 36px;

      .el-input{
        width: 150px;
      }
      .title{
        display: inline-block;
        min-width: 30px;
        margin-right: 10px;
        text-align: right;
      }
      .btn{
        padding: 0 5px;
        font-size: 12px;
        border-radius: 0;
        margin-left: 10px;
      }
    }
  }
  .parameter{

    >div.box{
      .title{
        min-width: 60px;
      }
      .el-input{
        width: 300px;
      }
    }
  }
  .submit-btn{
    width: 170px;
    margin: 0 140px
  }
}
</style>